<template>
  <public-dialog
    title="项目总结"
    width="45%"
    v-model:visible="visible"
    confirm-button-title="确认"
    :footer-button="type!=='query'"
    @on-confirm="onConfirm"
  >
    <template #default>
        <el-form :disabled="type==='query'">
          <el-row>
              <el-col :span="12">
                  <el-form-item label="项目名称:">
                      <span>{{info.projectName || '暂无'}}</span>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="利润率:">
                      <span>{{info.realProfit || '暂无'}}</span>
                  </el-form-item>
              </el-col>
          </el-row>
         <el-row>
             <el-col :span="12">
                 <el-form-item label="计划投资(万元):">
                     <span>{{info.projectAmount || '暂无'}}</span>
                 </el-form-item>
             </el-col>
            <el-col :span="12">
                <el-form-item label="实际投资(万元):">
                    <span>{{info.realAmount || '暂无'}}</span>
                </el-form-item>
            </el-col>
         </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="整体评价:">
                    <span class="d-flex" style="margin-top: 3px;">对项目进行整体评价</span>
                    <el-input
                        v-model="state.totalSummary"
                            :rows="2"
                            type="textarea"
                            placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="人员评价:">
                        <span class="d-flex" style="margin-top: 3px;">对项目进行人员评价</span>
                        <el-input
                                v-model="state.userSummary"
                                :rows="2"
                                type="textarea"
                                placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item class="form-item" label="阶段评价:">
                        <div v-if="type!=='query'">
                            <el-select v-model="state.stageId">
                                <el-option v-for="(item,index) in stagesList" :key="index" :label="item.stageName" :value="item.projectStageId"></el-option>
                            </el-select>
                            <el-button class="button_edit m-l10" @click="addStage">新增阶段评价</el-button>
                        </div>
                        <div v-for="(item,index) in state.stageSummaryList" :key="index" class="d-flex flex-column" style="width: 100%">
                            <span>对项目:{{item.projectStageName}}阶段进行性评价</span>
                            <div class="d-flex a-center">
                                <el-input
                                        v-model="item.summary"
                                        :rows="2"
                                        type="textarea"
                                        placeholder="请输入"
                                ></el-input>
                                <el-button v-if="type!=='query'" class="button_delete2 m-l10" @click="deleteStage(item)">删除</el-button>
                            </div>
                        </div>
                        <span v-if="state.stageSummaryList.length===0 && type==='query'">暂无</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </template>
  </public-dialog>
</template>

<script setup>
import {reactive, ref} from "vue";
import PublicDialog from "@/components/PublicDialog.vue";
import {ElForm, ElFormItem, ElRow, ElCol, ElSelect, ElOption, ElMessage} from "element-plus";
import {projectSetApi, summaryApi} from "@/api/investment";
import {projectPhase} from "@/api/project";
import {list} from "postcss";
import {resetForm} from "@/common/utils/GlobalUtils";

const emits = defineEmits(['onSuccess']);
const state = reactive({
    id:'',
    stageId:'',
    projectId:'',
    stageSummaryList:[],
    totalSummary:'',
    userSummary:'',
})

/**
 * 赋值
 * @param data1
 * @param data2
 */
const setData = (data1,data2) => {
    for (let k1 in data1){
        for (let k2 in data2){
            if(k1===k2){
                data1[k1] = data2[k2];
            }
        }
    }
}

const info = ref({});
/**
 * 项目详情
 */
const getInfo = (projectId,callback) => {
    projectSetApi.getInfo(projectId,callback).then(res=>{
      if(res.code==='200'){
          info.value = res.data;
          if(callback)callback(res.data);
      }
    });
}

/**
 * 获取项目实施阶段配置
 */
const stagesList = ref([]);
const getStage = (param) => {
    projectPhase.getProjectPhase(param).then(res=>{
        if(res.code === '200'){
            stagesList.value = res.data.stages;
        }
    });
}

const visible = ref(false);
const type = ref('');
const open = (projectId,t) => {
  state.projectId = projectId;
  type.value = t;
  getInfo(projectId,(res)=>{
      if(type.value==='edit' || type.value==='query'){
          setData(state,res);
      }
  });
  if(type.value==='add'){
      resetForm(state);
  }
  getStage({
      projectId:projectId,
      projectTypeId:''
  });
  visible.value = true;
}

/**
 * 新增阶段评论
 */
const addStage = () => {
  let list =  state.stageSummaryList.filter(item=>item.projectStageId===state.stageId);
  if(state.stageId===''){
      return ElMessage.warning('请选择阶段!');
  }
  if(list.length!==0){
      return ElMessage.warning('请勿重复添加!');
  }
  state.stageSummaryList.push({
      projectStageId:state.stageId,
      projectStageName: stagesList.value.filter(item=>item.projectStageId===state.stageId)[0].stageName,
      summary:''
  })
}

/**
 * 删除评价
 */
const deleteStage = () => {
    state.stageSummaryList = state.stageSummaryList.filter(item=>item.projectStageId!==state.stageId);
}

/**
 * 确认事件
 */
const onConfirm = () => {
    let obj = {'query':'query','add':'addOne','edit':'updateOne'};
    if(obj[type.value]==='query'){
        return visible.value = false;
    }
    summaryApi[obj[type.value]](state).then(res=>{
        if(res.code==='200'){
            emits('onSuccess');
            if(obj[type.value]==='addOne'){
                ElMessage.success('新增成功!');
            }
            if(obj[type.value]==='updateOne'){
                ElMessage.success('编辑成功!');
            }
            visible.value = false;
        }
    });
}

defineExpose({
    open
});
</script>

<style lang="scss" scoped>

</style>
